<template>
  <div class="upload">
    <div style="color: red">备注:父传子-props</div>
    <div style="color: red">1.子组件通过defineProps接收</div>

    <br />
    <Childs  :list="personInfo" @changeName="changeName" />
  </div>
</template>

<script setup lang="ts" name="props">
import { reactive, onMounted } from "vue";
import { personInfoType } from "./type/index";
import Childs from "./components/Childs.vue";
console.log(1);
onMounted(() => {
  console.log(4);
});

const changeName = (data) => {
  console.log("data", data);
  personInfo[0].name = data;
};
const personInfo = reactive<personInfoType[]>([
  {
    id: 1,
    name: "John",
    age: 20,
  },
  {
    id: 2,
    name: "John2",
    age: 205,
  },
]);

console.log(personInfo);
</script>

<style scoped lang="scss">
@import "./index.module.scss";
</style>
